<template>
  <div>
    <van-search
      v-model="value"
      label="地图"
      show-action
      background="#21b97a"
      placeholder="请输入小区地址"
    >
      <template #left>
        <van-icon
          name="arrow-left"
          size="20"
          @click="$router.go(-1)"
          style="margin-right: 5px"
        />
      </template>
      <template #label>
        <span @click="$router.push('/city')">
          {{ $store.state.city.cityName }}</span
        >
        <van-icon name="arrow-down" />
      </template>
      <template #action>
        <van-icon name="location-o" />
      </template>
    </van-search>
    <!-- 导航栏 --><van-sticky>
      <van-dropdown-menu active-color="#21b97a">
        <van-dropdown-item title="区域" ref="item">
          <van-picker
            show-toolbar
            toolbar-position="bottom"
            :columns="columns"
            @confirm="onConfirm"
            @cancel="onCancel('item')"
          />
        </van-dropdown-item>
        <van-dropdown-item title="方式" ref="item1"> 
          <van-picker
            show-toolbar
            toolbar-position="bottom"
            :columns="rentType"
            @confirm="onConfirm1"
            @cancel="onCancel('item1')"
          />
        </van-dropdown-item>
        <van-dropdown-item title="租金" ref="item2">
           <van-picker
            show-toolbar
            toolbar-position="bottom"
            :columns="priceList"
            @confirm="onConfirm2"
            @cancel="onCancel('item2')"
          />
           </van-dropdown-item>
        <van-dropdown-item title="筛选" ref="item3" @click="showPopup">
          <van-popup v-model="showRight" position="right" :style="{ height: '70%' }" >内容</van-popup>
           </van-dropdown-item>
      </van-dropdown-menu>
    </van-sticky>

    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="我是有底线的"
      @load="onLoad"
    >
      <HouseItem
        v-for="item in list"
        :key="item.houseCode"
        :item="item"
      ></HouseItem>
    </van-list>
  </div>
</template>

<script>
import HouseItem from '@/components/house-item.vue'
import { getHouse, cityAreaHouse } from '@/api/house'

export default {
  name: 'Looking',
  components: {
    HouseItem,
  },
  async created() {
    const { body } = await cityAreaHouse(this.$store.state.city.cityCode)
    console.log(body)
    this.allList=body
    const newObj = {}
    
    function setKeys(oldData, newData) {
      for (let key in oldData) {
        if (oldData[key] instanceof Array) {
          newData[key] = []
          setKeys(oldData[key], newData[key])
        } else if (oldData[key] instanceof Object && key !== 'label') {
          newData[key] = {}
          setKeys(oldData[key], newData[key])
        } else {
          if (key === 'label') {
            newData['text'] = oldData[key]
          }
          if (newData['text'] === '不限') {
            newData.children = []
          }
          newData[key] = oldData[key]
          delete newData.label
        }
      }
    }
    setKeys(body, newObj)
    // console.log(newObj.area);
    this.columns.push(newObj.area, newObj.subway)
   
  },
  computed:{
    rentType(){
      const arr = []
        this.allList.rentType.forEach(item => arr.push(item.label))
        return arr
    },
    priceList(){
      const arr = []
       this.allList.price.forEach(item => arr.push(item.label))
      return arr
    }
  },
  data() {
    return {
      allList:{},
      list: [],
      loading: false,
      finished: false,
      value: '',
      columns: [],
      isShow: false,
      showRight:false
    }
  },
  methods: {
    async onLoad() {
      // 异步更新数据
      const { body } = await getHouse()

      this.list = [...this.list, ...body.list]

      this.loading = false

      // 数据全部加载完成
      if (this.list.length >= 20) {
        this.finished = true
      }
    },
    onConfirm() {
      this.$refs.item.toggle()
    },
    onConfirm1(){
  this.$refs.item1.toggle()
    },
onConfirm2(){
   this.$refs.item1.toggle()
},
    onCancel(id) {
      this.$refs[id].toggle()
    },
    showPopup(){
      console.log(1);
      this.showRight=true
    }
   
  },
}
</script>

<style scoped lang="less">
/deep/ .van-picker__cancel {
  flex: 1 1;
  border-radius: 0;
  color: #21b97a;
}
/deep/ .van-picker__confirm {
  border-radius: 0;
  flex: 2 1;
  color: #fff;
  background-color: #21b97a;
}
.banner {
  display: flex;
  justify-content: space-evenly;
  text-align: center;
}
.btn {
  display: flex;
  .left {
    flex-grow: 1;
  }
  .right {
    width: 170%;
  }
}
</style>
